<template>
    <svg aria-hidden="true" :class="svgClass">
        <use :xlink:href="symbolId" />
    </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    prefix: { type: String, default: '' },
    iconClass: { type: String, required: true },
    color: { type: String, default: 'line' },
    svgClass: { type: String, default: '' },
})

const symbolId = computed(() => {
    let cor = ''
    if (props.prefix != 'Editor') {
        cor = props.color != '' ? '-' + props.color : ''
    }
    const icons = props.iconClass.split('-')
    // console.log("icons=", icons)
    if (icons[0] == 'Editor') {
        cor = ''
    }

    const pre = props.prefix != '' ? props.prefix + '-' : ''
    return `#${pre}${props.iconClass}${cor}`
});
// console.log(symbolId.value)

const svgClass = computed(() => {
    let icon = 'svg-icon'
    if (props.svgClass != '') {
        icon = icon + ' ' + props.svgClass;
    }
    return icon;
})

</script>

<style scoped>
.svg-icon {
    width: 1.2em;
    height: 1.2em;
    overflow: hidden;
    fill: currentColor;
    margin-top: -2px;
    vertical-align: middle;
}

.svg-icon-14 {
    width: 1.4em;
    height: 1.4em;
}
</style>